@using Microsoft.AspNetCore.Components
<DocMatNumericUpDownField></DocMatNumericUpDownField>


<h5 class="mat-h5">Example</h5>
<DemoContainer>
    <Content>

        <p>
            <MatNumericUpDownField Label="Two decimal places"
                                   @bind-Value=@testingNullableDecimal1
                                   Step="0.01m"
                                   DecimalPlaces=2>
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="No decimal places"
                                   @bind-Value=@testingNullableDecimal2
                                   DecimalPlaces=0
                                   Minimum=null Maximum=null>
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="Currency field type"
                                   @bind-Value=@testingCurrency
                                   FieldType="MatNumericUpDownFieldType.Currency"
                                   DecimalPlaces=2>
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="Percent field type"
                                   @bind-Value=@testingNullableDecimal1
                                   FieldType="MatNumericUpDownFieldType.Percent"
                                   DecimalPlaces=0
                                   Minimum=null Maximum=null>
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="Disabled"
                                   @bind-Value=@testingNullableDecimal2
                                   DecimalPlaces=0
                                   Disabled=true
                                   Minimum=null Maximum=null>
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="With icon"
                                   @bind-Value=@testingNullableDecimal3
                                   DecimalPlaces=0
                                   Icon="favorite"
                                   Minimum=null Maximum=null>
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="Outlined"
                                   @bind-Value=@testingNullableDecimal4
                                   DecimalPlaces=0
                                   Outlined="true"
                                   Minimum=null Maximum=null>
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="AllowInput - false"
                                   @bind-Value="@testingNullableDecimal4"
                                   AllowInput="false">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="Full width"
                                   @bind-Value=@testingNullableDecimal4
                                   DecimalPlaces=0
                                   Outlined="true"
                                   FullWidth="true"
                                   Minimum=null Maximum=null>
            </MatNumericUpDownField>
        </p>




        @code
        {
            decimal? testingNullableDecimal1 = 0m;
            decimal? testingNullableDecimal2 = null;
            decimal? testingNullableDecimal3 = null;
            decimal? testingNullableDecimal4 = null;
            decimal testingCurrency = 0m;

            string ButtonState = "";

            void Click(MouseEventArgs e)
            {
                ButtonState = "Clicked";
                testingNullableDecimal1 += 1;
                testingNullableDecimal2 += 100;
            }

        }


    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"

        <p>
            <MatNumericUpDownField Label=""Two decimal places""
                                   @bind-Value=@testingNullableDecimal1
                                   Step=""0.01m""
                                   DecimalPlaces=2>
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""No decimal places""
                                   @bind-Value=@testingNullableDecimal2
                                   DecimalPlaces=0
                                   Minimum=null Maximum=null>
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""Currency field type""
                                   @bind-Value=@testingCurrency
                                   FieldType=""MatNumericUpDownFieldType.Currency""
                                   DecimalPlaces=2>
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""Percent field type""
                                   @bind-Value=@testingNullableDecimal1
                                   FieldType=""MatNumericUpDownFieldType.Percent""
                                   DecimalPlaces=0
                                   Minimum=null Maximum=null>
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""Disabled""
                                   @bind-Value=@testingNullableDecimal2
                                   DecimalPlaces=0
                                   Disabled=true
                                   Minimum=null Maximum=null>
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""With icon""
                                   @bind-Value=@testingNullableDecimal3
                                   DecimalPlaces=0
                                   Icon=""favorite""
                                   Minimum=null Maximum=null>
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""Outlined""
                                   @bind-Value=@testingNullableDecimal4
                                   DecimalPlaces=0
                                   Outlined=""true""
                                   Minimum=null Maximum=null>
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""AllowInput - false""
                                   @bind-Value=""@testingNullableDecimal4""
                                   AllowInput=""false"">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""Full width""
                                   @bind-Value=@testingNullableDecimal4
                                   DecimalPlaces=0
                                   Outlined=""true""
                                   FullWidth=""true""
                                   Minimum=null Maximum=null>
            </MatNumericUpDownField>
        </p>




        @code
        {
            decimal? testingNullableDecimal1 = 0m;
            decimal? testingNullableDecimal2 = null;
            decimal? testingNullableDecimal3 = null;
            decimal? testingNullableDecimal4 = null;
            decimal testingCurrency = 0m;

            string ButtonState = """";

            void Click(MouseEventArgs e)
            {
                ButtonState = ""Clicked"";
                testingNullableDecimal1 += 1;
                testingNullableDecimal2 += 100;
            }

        }


    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>

<AnchorHeader Text="Generic types"></AnchorHeader>
<p>MatNumericUpDownField supports different generic types</p>
<DemoContainer>
    <Content>

        <p>
            <MatNumericUpDownField Label="sbyte"
                                   @bind-Value="@v1">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="byte"
                                   @bind-Value="@v2">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="short"
                                   @bind-Value="@v3">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="ushort"
                                   @bind-Value="@v4">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="int"
                                   @bind-Value="@v5">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="uint"
                                   @bind-Value="@v6">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="long"
                                   @bind-Value="@v7">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="ulong"
                                   @bind-Value="@v8">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="char"
                                   @bind-Value="@v9">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="float"
                                   @bind-Value="@v10">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="double"
                                   @bind-Value="@v11">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="decimal"
                                   @bind-Value="@v12">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="decimal?"
                                   @bind-Value="@v13">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="sbyte?"
                                   @bind-Value="@v14">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="byte?"
                                   @bind-Value="@v15">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="short?"
                                   @bind-Value="@v16">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="ushort?"
                                   @bind-Value="@v17">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="int?"
                                   @bind-Value="@v18">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="uint?"
                                   @bind-Value="@v19">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="long?"
                                   @bind-Value="@v20">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="ulong?"
                                   @bind-Value="@v21">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="char?"
                                   @bind-Value="@v22">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="float?"
                                   @bind-Value="@v23">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label="double?"
                                   @bind-Value="@v24">
            </MatNumericUpDownField>
        </p>



        @code
        {
            sbyte v1;
            byte v2;
            short v3;
            ushort v4;
            int v5;
            uint v6;
            long v7;
            ulong v8;
            char v9;
            float v10;
            double v11;
            decimal v12;
            decimal? v13;
            sbyte? v14;
            byte? v15;
            short? v16;
            ushort? v17;
            int? v18;
            uint? v19;
            long? v20;
            ulong? v21;
            char? v22;
            float? v23;
            double? v24;        }


    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"

        <p>
            <MatNumericUpDownField Label=""sbyte""
                                   @bind-Value=""@v1"">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""byte""
                                   @bind-Value=""@v2"">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""short""
                                   @bind-Value=""@v3"">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""ushort""
                                   @bind-Value=""@v4"">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""int""
                                   @bind-Value=""@v5"">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""uint""
                                   @bind-Value=""@v6"">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""long""
                                   @bind-Value=""@v7"">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""ulong""
                                   @bind-Value=""@v8"">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""char""
                                   @bind-Value=""@v9"">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""float""
                                   @bind-Value=""@v10"">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""double""
                                   @bind-Value=""@v11"">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""decimal""
                                   @bind-Value=""@v12"">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""decimal?""
                                   @bind-Value=""@v13"">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""sbyte?""
                                   @bind-Value=""@v14"">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""byte?""
                                   @bind-Value=""@v15"">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""short?""
                                   @bind-Value=""@v16"">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""ushort?""
                                   @bind-Value=""@v17"">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""int?""
                                   @bind-Value=""@v18"">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""uint?""
                                   @bind-Value=""@v19"">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""long?""
                                   @bind-Value=""@v20"">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""ulong?""
                                   @bind-Value=""@v21"">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""char?""
                                   @bind-Value=""@v22"">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""float?""
                                   @bind-Value=""@v23"">
            </MatNumericUpDownField>
        </p>

        <p>
            <MatNumericUpDownField Label=""double?""
                                   @bind-Value=""@v24"">
            </MatNumericUpDownField>
        </p>



        @code
        {
            sbyte v1;
            byte v2;
            short v3;
            ushort v4;
            int v5;
            uint v6;
            long v7;
            ulong v8;
            char v9;
            float v10;
            double v11;
            decimal v12;
            decimal? v13;
            sbyte? v14;
            byte? v15;
            short? v16;
            ushort? v17;
            int? v18;
            uint? v19;
            long? v20;
            ulong? v21;
            char? v22;
            float? v23;
            double? v24;        }


    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>